<template>
  <div class="graph-analysis-footer">
    <div class="table-info-header">
      <div class="footer-left">
        <div class="table-name-text">图数据详情</div>
        <div class="graph-info-tabs">
          <div
            v-for="(tab, index) in tabs"
            :key="index"
            ref="item"
            class="tabs-item"
            :class="{ active: nodeOrEdgeTab === tab.type }"
            :style="{
              width: tabWidth + 'px',
              left: (tabWidth - gap * 2) * index + 'px',
            }"
            @click="handleClickTab(tab)"
          >
            <!-- 背景样式 -->
            <div class="tabs-background">
              <div class="tabs-background-content"></div>
              <svg class="tabs-background-before">
                <path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z"></path>
              </svg>
              <svg class="tabs-background-after">
                <path d="M 0 0 A 7 7 0 0 0 7 7 L 0 7 Z"></path>
              </svg>
            </div>
            <!-- tab label  -->
            <div class="tabs-main">
              <div class="tabs-label">
                <span class="tabs-label-text">{{ tab.name }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div ref="graph-data-sub-tabs" class="sub-tab">
      <a-radio-group
        :value="activeCategoriesId"
        size="small"
        @change="handleRadioChange"
      >
        <a-radio-button
          v-for="(tab, index) in categoriesTabs"
          :key="index"
          :value="tab.id"
        >
          {{ tab.label }}
        </a-radio-button>
      </a-radio-group>
    </div>
    <div class="info-detail-content" :style="{ height: `${tableHeight}px` }">
      <!-- 数据表 -->
      <graph-data-table ref="graph-table-detail" :table-height="tableHeight" />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import GraphDataTable from '@/components/graph-analysis/analysis-footer/GraphDataTable.vue'
import GraphAnalysis from '@/store/modules/graphanalysis'
// import {debounce} from 'lodash'
// @ts-ignore
const elementResizeDetectorMaker = require('element-resize-detector')

@Component({
  components: {
    GraphDataTable,
  },
})
export default class AnalysisFooter extends Vue {
  @Prop({ type: Number, default: 300 }) footerHeight!: number
  private tabWidth: number = 100 // chrome tab
  private gap: number = 7 // chrome tab gap
  // graph Id
  public get activeTabId() {
    return GraphAnalysis.activeTabId
  }
  private tabs: any[] = [
    { name: '节点', type: 'node' },
    { name: '边', type: 'link' },
  ] //
  private nodeOrEdgeTab: string = 'node'

  // 分类节点
  public activeCategoriesId: any = null
  public get categoriesTabs() {
    if (this.nodeOrEdgeTab === 'link') {
      return GraphAnalysis.edgesClass
    }
    return GraphAnalysis.categories
  }

  /**
   * 切换 graph 更新相应图数据表
   */
  @Watch('categoriesTabs')
  public activeTabIdWatch() {
    if (this.categoriesTabs.length > 0) {
      this.activeCategoriesId = this.categoriesTabs[0].id
      this.updateGraphTable()
    } else {
      this.clearGraphTable()
    }
  }

  // 切换 节点 / 边
  private handleClickTab(tab: any) {
    this.nodeOrEdgeTab = tab.type
    this.activeCategoriesId = this.categoriesTabs[0].id // 修改 activeCategoriesId 触发 <a-radio-group>  @change="handleRadioChange" 事件
  }

  /**
   * 二级 tab 切换
   */
  public handleRadioChange($event: any) {
    this.activeCategoriesId = $event.target.value
    this.$nextTick(() => {
      this.updateGraphTable()
    })
  }

  /**
   * 更新图数据表
   */
  public updateGraphTable() {
    this.$nextTick(() => {
      const GraphDataTableVue: any = this.$refs['graph-table-detail'] as Vue
      GraphDataTableVue.changeData({
        nodeOrEdgeTab: this.nodeOrEdgeTab,
        activeCategoriesId: this.activeCategoriesId,
      })
    })
  }

  /**
   * 清空图数据表
   */
  public clearGraphTable() {
    this.$nextTick(() => {
      const GraphDataTableVue: any = this.$refs['graph-table-detail'] as Vue
      GraphDataTableVue.clearGraphData()
    })
  }

  public get tableHeight() {
    return this.footerHeight - this.subTabsHeight - 32
  }

  private subTabsHeight: number = 48 // sub tab height, 及 外边距
  public mounted() {
    // this.activeCategoriesId = this.categoriesTabs[0].id
    this.$nextTick(() => {
      const erdTable = elementResizeDetectorMaker()
      const nodeEditBox = this.$refs['graph-data-sub-tabs'] as HTMLElement
      erdTable.listenTo(nodeEditBox, (element: HTMLElement) => {
        this.subTabsHeight = element.offsetHeight + 16
      })
      this.$once('hook:beforeDestroy', () => {
        erdTable.removeAllListeners(nodeEditBox)
      })
    })
  }
}
</script>

<style scoped lang="less">
@import '@/styles/scroll-bar';

.graph-analysis-footer {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  width: 100%;

  .table-info-header {
    align-items: center;
    background-color: #ededf4;
    display: flex;
    flex-shrink: 0;
    height: 32px;
    justify-content: space-between;
    padding: 0 12px;
    position: relative;
    user-select: none;
    width: 100%;

    .footer-left {
      align-items: flex-end;
      display: flex;
      height: 100%;
      width: 300px;

      .table-name-text {
        color: #373b52;
        flex-shrink: 0;
        font-size: 14px;
        font-weight: bold;
        height: 26px;
        line-height: 26px;
        padding: 0 14px 0 12px;
        width: 100px;
      }

      .graph-info-tabs {
        height: 26px;
        position: relative;
        width: 300px;
      }
    }
    /* tab */
    .tabs-item {
      align-items: center;
      box-sizing: border-box;
      display: flex;
      height: 26px;
      position: absolute;
      transition: width 0ms;
      user-select: none;

      /* hover */
      &:hover {
        .tabs-background-content {
          background-color: #f2f3f5;
        }

        .tabs-background-before,
        .tabs-background-after {
          fill: #f2f3f5;
        }
      }

      /* 激活 */
      &.active {
        z-index: 2;

        .tabs-background {
          opacity: 1;
        }

        .tabs-background-content {
          background-color: #fff;
        }

        .tabs-background-before,
        .tabs-background-after {
          fill: #fff;
        }
      }
    }

    /* tab 标签 */
    .tabs-main {
      align-items: center;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      box-sizing: border-box;
      cursor: pointer;
      display: flex;
      height: 100%;
      left: 0;
      margin: 0 14px;
      overflow: hidden;
      position: absolute;
      right: 0;
      transition: 150ms;
      width: calc(100% - 28px);

      /* tabs-main 中的 label */
      .tabs-label {
        align-items: center;
        box-sizing: border-box;
        display: flex;
        flex: 1;
        justify-content: center;
        margin-left: 7px;
        margin-right: 16px;
        width: calc(100% - 23px);

        .tabs-label-text {
          display: inline-block;
          max-width: calc(100% - 20px);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    /* background 背景样式 */
    .tabs-background {
      box-sizing: border-box;
      height: 100%;
      padding: 0 7px - 1px;
      position: absolute;
      transition: opacity 300ms;
      width: 100%;

      .tabs-background-content {
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
        height: 100%;
        transition: background 150ms;
      }

      .tabs-background-before,
      .tabs-background-after {
        bottom: -1px;
        fill: transparent;
        height: 7px;
        position: absolute;
        transition: background 150ms;
        width: 7px;
      }

      .tabs-background-before {
        left: -1px;
      }

      .tabs-background-after {
        right: -1px;
      }
    }
  }

  .sub-tab {
    margin: 8px 12px;

    /deep/ .ant-radio-group-outline {
      line-height: 32px;
    }

    /deep/ .ant-radio-button-wrapper-checked {
      background-color: #5561ff;
      color: #fff;
    }
  }

  //.info-detail-content {
  //  height: calc(100% - 80px);
  //}
}
</style>
